import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import Qt.labs.platform 1.0
import user.wz.fontloader 1.0

ApplicationWindow {
    visible: true
    width: 800
    height: 640
    title: qsTr("FontAwesome Viewer")
    property string currentFont
    FontLoader {
        id: fontLoader
        onFontChanged: currentFont = newFont.length > 0 ? newFont : currentFont
    }

    ScrollView {
        id: scrollView
        anchors.rightMargin: 300
        anchors.fill: parent

        GridView {
            id: gridView
            model: 0x20c
            cellHeight: 50
            cellWidth: 50
            delegate: ItemDelegate {

                width: gridView.cellWidth
                height: gridView.cellHeight
                font.family: currentFont
                text: String.fromCharCode(0xf000 + index)

                font.pointSize: width / 2
                onClicked: {
                    gridView.currentIndex = index
                    text_preview.font.family = currentFont
                    text_preview.text = String.fromCharCode(0xf000 + index)
                    text_preview.data = " \\u" + (0xf000 + index).toString(16)
                    fontLoader.toClipboard(
                                " \\u" + (0xf000 + index).toString(16))
                }
                hoverEnabled: true
                highlighted: true
                ToolTip.visible: hovered
                ToolTip.text: "Unicode: \\u" + (0xf000 + index).toString(
                                  16) + "\nNAME   : fa-test\n
Click to copy unicode to clipboard"
            }
        }
    }

    MouseArea {
        width: 410
        height: 20
        anchors.horizontalCenter: scrollView.horizontalCenter
        anchors.bottom: parent.bottom
        hoverEnabled: true
        Rectangle {
            id: rectangle_scale
            color: "#ffffff"
            height: parent.height
            anchors {
                left: parent.left
                right: parent.right
                top: parent.top
                topMargin: height
            }

            RoundButton {

                id: roundButton_zoomOut
                height: parent.height
                width: parent.height
                text: "-"
                anchors.right: slider_zoom.left
                anchors.rightMargin: 6
                anchors.verticalCenter: parent.verticalCenter
                onClicked: slider_zoom.value -= 2
            }

            Slider {
                id: slider_zoom
                from: 50
                to: 80
                wheelEnabled: true
                hoverEnabled: true
                stepSize: 2
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
                value: 50
                onValueChanged: {
                    gridView.cellHeight = value
                    gridView.cellWidth = value
                }
            }

            RoundButton {
                id: roundButton_zoomIn
                height: parent.height
                width: parent.height
                text: "+"
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: slider_zoom.right
                anchors.leftMargin: 6
                onClicked: slider_zoom.value += 2
            }
        }
        onContainsMouseChanged: {
            if (containsMouse)
                showScale.start()
            else
                hideScale.start()
        }

        PropertyAnimation {
            id: showScale
            target: rectangle_scale
            property: "anchors.topMargin"
            to: 0
            duration: 70
        }
        PropertyAnimation {
            id: hideScale
            target: rectangle_scale
            property: "anchors.topMargin"
            to: height
            duration: 70
        }
    }

    Rectangle {
        id: rectangle_setting
        anchors.left: scrollView.right
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.top: parent.top
        anchors.leftMargin: 0
        color: "skyblue"

        GridLayout {
            id: gridLayout
            anchors.right: parent.right
            anchors.left: parent.left
            anchors.top: parent.top
            columns: 2

            MouseArea {
                Layout.preferredHeight: 280
                Layout.preferredWidth: 280
                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                Layout.fillHeight: false
                Layout.fillWidth: false
                Layout.columnSpan: 2

                Text {
                    id: text_preview
                    text: "c"
                    anchors.fill: parent
                    font.pixelSize: 280
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                }
                onClicked: {
                    fontLoader.toClipboard(data)
                }
            }

            TextField {
                id: textInput_fontFile
                text: qsTr("Text Input")
                Layout.maximumWidth: 195
                Layout.preferredWidth: 195
                Layout.fillWidth: false
                font.pixelSize: 12
                selectByMouse: true
                autoScroll: true
            }

            Button {
                id: button_selectFile
                text: qsTr("Select")
                onClicked: {
                    fileDialog.open()
                }
            }

            ComboBox {
                id: comboBox_fontawesomeFont
                Layout.fillWidth: true
                model: Qt.fontFamilies()

                onCurrentTextChanged: {
                    currentFont = comboBox_fontawesomeFont.currentText
                }
                editable: true
            }

            Button {
                id: button_show
                text: qsTr("show")
                onClicked: {
                    fontLoader.setFontFile(textInput_fontFile.text)
                }
            }

            FileDialog {
                id: fileDialog
                fileMode: FileDialog.OpenFile
            }

            Binding {
                target: textInput_fontFile
                property: "text"
                value: fileDialog.file
            }
        }
    }
    Component.onCompleted: {
        currentFont = comboBox_fontawesomeFont.textAt(1)
    }
}

/*##^## Designer {
    D{i:6;anchors_height:200;anchors_width:200;anchors_x:594;anchors_y:123}
}
 ##^##*/

